【Swift】TableViewControllerでTableViewのセクションが最前面に来てしまうので対応した

TableViewControllerのviewにaddSubViewした時に意図していなかったUIになっていた為、対応しました。

環境

• Xcode 13

コード

viewDidLoadでImageViewをUITableViewControllerのviewにaddSubViewしています。 この内容でビルドするとどんな結果になるでしょうか？

import UIKit

class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let imageView = UIImageView()
        imageView.image = UIImage(named: "adult")
        imageView.frame.size = CGSize(width: 200, height: 200)
        imageView.center = view.center
        view.addSubview(imageView)
    }

    // MARK: - Table view data source
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 6
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 6
    }

    override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
        return String(section)
    }

    override func tableView(_ tableView: UITableView, willDisplayHeaderView view: UIView, forSection section: Int) {
        guard let headerView = view as? UITableViewHeaderFooterView
        else { fatalError() }

        headerView.tintColor = .black
        headerView.textLabel?.textColor = .white
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
        else { fatalError() }
        return cell
    }
}

結果

addSubViewしたImageViewよりTableViewのセクションが前面に来てしまい、目を覆ったような状態になってしまいました。

Debug View Hierarchy

どのような状態になっているかビュー階層を見てみることにしました。 案の定、追加したImageViewよりTableViewのheaderViewが前面になっていることにより、意図しない目を隠されているような状態になってしまいました。

対応

viewDidAppearでbringSubViewToFrontメソッドを使い、ImageViewを最前面に表示します。

class TableViewController: UITableViewController {

    private var imageView = UIImageView()

    override func viewDidLoad() {
        super.viewDidLoad()

        imageView = UIImageView()
        imageView.image = UIImage(named: "adult")
        imageView.frame.size = CGSize(width: 200, height: 200)
        imageView.center = view.center
        view.addSubview(imageView)
    }

    override func viewDidAppear(_ animated: Bool) {
        view.bringSubviewToFront(imageView)
    }

// 以下省略

bringSubviewToFront

UIViewのインスタンスメソッドで、パラメーターに渡したsubViewをsubViewsの配列の最後尾に移動させることが出来ます。

func bringSubviewToFront(_ view: UIView)

そうすることによって、パラメーターで指定されたsubViewが親Viewの最前列に表示されます。

結果

補足

実はこの現象はUITableViewControllerを使用した時のみに発生している現象で、通常のUIViewControllerにUITableViewを配置し、addSubViewした場合では、セクションが前面に表示されることはなく意図した通りの表示になっていました。

おわりに

罪のない人が何かやってしまった風になってしまいそうでしたが、セクションのViewを背面にすることができ、問題を無事に解決出来てよかったです。

参考

• Documentation - bringSubviewToFront(_:)